<template>
	<div>
		<div class="headercon" style="height: 100px;">
			<el-form class="cardboxList_box">
				<el-row :gutter="60">
					<!-- <el-col :span="20" style="padding-left: 0;">
						<el-form-item label="收款码" label-width="58px">
							<el-image style="width: 120px;height: 120px;" class="table-td-thumb" :src="addform.qr_code"
								:preview-src-list="addform.qr_code"></el-image>
							<el-upload class="upload-demo" :action="uploadImgUrl" ref="upload" :file-list="fileList"
								:http-request="uploadSectionFile" :before-remove="handleRemove">
								<el-button size="small" type="primary">点击上传</el-button>
							</el-upload>
						</el-form-item>
					</el-col> -->
		
					<!-- <div class="box" style="width: ;">
						<div class="title">定制配置</div>
						<el-col :span="20">
							<el-form-item label="期刊定制单价" label-width="120px" required>
								<el-input style="width:100%;" v-model="addform.qikandingzhi_danjia"
									type="text"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="20">
							<el-form-item label="期刊单本永久" label-width="120px" required>
								<el-input style="width:100%;" v-model="addform.qikandingzhi_yongjiu"
									type="text"></el-input>
							</el-form-item>
						</el-col>

						<div style="clear: both;"></div>
					</div> -->
	
					
					<el-col :span="20" style="padding-left: 0;margin-top: 20px;">
						<el-form-item label="说明配置" label-width="120px" required>
							<quill-editor class="ql-editor" ref="myTextEditor"
								v-model="addform.fuwenben" :options="editorOption"></quill-editor>
						</el-form-item>
					</el-col>
					<div style="clear: both;"></div>
					<!-- <el-col :span="20">
						<el-form-item label="会员等级" label-width="100px">
							<el-select v-model="addform.member_level" placeholder="请选择" style="width: 100%;">
								<el-option v-for="item in member_levelOptions" :key="item.name"
									:label="item.name" :value="item.name">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col> -->
				</el-row>
				<div class="grid-content bg-purple" style="margin: auto;margin-top: 60px;width: 220px;">
					<el-button style="width: 220px;" type="primary" @click="submitForm_add">保存</el-button>
				</div>
			</el-form>
             <el-dialog :close-on-click-modal="false" width="800px" style="margin-top: 1px" title="视频上传" :visible.sync="videoDialog.show"
              append-to-body class="avatar-uploader-dialog" ref="dialog">
             	<el-tabs v-model="videoDialog.activeName">
             		<el-tab-pane label="添加视频链接" name="first">
             			<el-input v-model="videoDialog.videoLink" placeholder="请输入视频链接" clearable></el-input>
             			<el-button type="primary" size="small" style="margin: 20px 0px 0px 0px" @click="addVideoLink(videoDialog.videoLink)">添加
             			</el-button>
             		</el-tab-pane>
             		<el-tab-pane label="本地视频上传" name="second">
             			<!-- :data="{ game: 'ppjt' }" -->
             			<el-upload drag :action="uploadImgUrl" accept="video/*" :show-file-list="false" name="image" :on-success="uploadVideoSuccess"
             			 :before-upload="beforeUploadVideo" :on-error="uploadVideoError" :multiple="false">
             				<i class="el-icon-upload"></i>
             				<div class="el-upload__text">点击上传</div>
             			</el-upload>
             		</el-tab-pane>
             	</el-tabs>
             </el-dialog>
			<!-- <el-button type="primary" @click="showdialogVisible">新增</el-button> -->
		</div>




	</div>
</template>

<script>
	import 'quill/dist/quill.core.css';
	import 'quill/dist/quill.snow.css';
	import 'quill/dist/quill.bubble.css';
	import {
		quillEditor,
		Quill
	} from 'vue-quill-editor';
	import {
		container,
		ImageExtend,
		QuillWatch
	} from 'quill-image-extend-module'
	Quill.register('modules/ImageExtend', ImageExtend)
	import Video from '../../utils/video.js'
	Quill.register(Video, true)
	// import {
	// 	quillEditor
	// } from 'vue-quill-editor';
	// 富文本编辑器工具栏配置，因为涉及到富文本编辑器以外的组件调用，所以在这里我们需要重新自定义一下富文本编辑器的工具栏
	const toolbarOptions = [
		['bold', 'italic', 'underline', 'strike'], // toggled buttons
		['blockquote', 'code-block'],

		[{
			header: 1
		}, {
			header: 2
		}], // custom button values
		[{
			list: 'ordered'
		}, {
			list: 'bullet'
		}],
		[{
			script: 'sub'
		}, {
			script: 'super'
		}], // superscript/subscript
		[{
			indent: '-1'
		}, {
			indent: '+1'
		}], // outdent/indent
		[{
			direction: 'rtl'
		}], // text direction

		[{
			size: ['small', false, 'large', 'huge']
		}], // custom dropdown
		[{
			header: [1, 2, 3, 4, 5, 6, false]
		}],

		[{
			color: []
		}, {
			background: []
		}], // dropdown with defaults from theme
		[{
			font: []
		}],
		[{
			align: []
		}],
		['link', 'image', 'video'],
		['clean'] // remove formatting button
	]
	import {

		uploadImg,
		shuomingList,
		shuomingEdict,
		proUrl

	} from '../../api/index';
	export default {
		name: 'dashboard',
		data() {
			let self = this
			return {
				checkList: [],
				videoDialog: {
					show: false,
					activeName: 'first',
					videoLink: ''
				},
				proUrl: proUrl,
				readOnly: false,
				jurisdiction: [],
				roleOptions: [],
				deleteList_data: [],
				uploadImgUrl: proUrl + '/backstage/api/upload_image/',
				fileList: [],
				fileList1: [],

				fileList_1: [],
				fileList_2: [],

				optionsUser: [{
						username: '管理员'
					},
					{
						username: '子管理'
					}
				],

				jiangjingoptions: [{
						text: '是',
						value: 1
					},
					{
						text: '否',
						value: 0
					}
				],

				templateVisible: false,
				showViewer: false, // 显示查看器
				ruleForm: '',
				hideUp: '',
				nextProjectForm: {
					publicWelfareUrl: "",
				},
				Texttitle: "新增",
				page: 1,
				page_1: 1,
				form: {
					page: 1,
					size: 30,
					content: undefined,
					dynamic_type: undefined
				},

				addform: {

				},

				childrow: '',
				childtypeflag: 1, //  1新增 2修改
				currentPage: 1, //初始页
				pagesize: 10, //  每页的数据
				pageTotal: '',

				currentPage_1: 1, //初始页
				pagesize_1: 10, //    每页的数据
				pageTotal_1: '',

				currentPage_2: 1, //初始页
				pagesize_2: 10, //    每页的数据
				pageTotal_2: '',

				dialogVisible: false,
				tableData: '',

				formitnanme: '',
				flagtype: 1,
				user_id: '',
				// 富文本编辑器工具栏
				editorOption: {
					modules: {
						ImageExtend: {
							loading: true,
							name: "image",
							size: 10000,
							action: proUrl + '/backstage/api/upload_image/',
							response: res => {
								console.log(res)
								return res.url;
							},
							headers: (xhr, formData) => {
								//xhr.setRequestHeader(
								//  "X-Nideshop-Token",
								//  localStorage.getItem("token")
								//);
							}, // 可选参数 设置请求头部
							sizeError: () => {
								// return this.$message.error("图片超过20");
							} // 图片超过大小的回调
						},
						toolbar: {
							container: [
								["bold", "italic", "underline", "strike"], // 加粗，斜体，下划线，删除线
								["blockquote", "code-block"], //引用，代码块
								[{
									header: 1
								}, {
									header: 2
								}], // 几级标题
								[{
									list: "ordered"
								}, {
									list: "bullet"
								}], // 有序列表，无序列表
								[{
									script: "sub"
								}, {
									script: "super"
								}], // 下角标，上角标
								[{
									indent: "-1"
								}, {
									indent: "+1"
								}], // 缩进
								[{
									direction: "rtl"
								}], // 文字输入方向
								[{
									size: ["small", false, "large", "huge"]
								}], // 字体大小
								[{
									header: [1, 2, 3, 4, 5, 6, false]
								}], // 标题
								[{
									color: []
								}, {
									background: []
								}], // 颜色选择
								[{
									font: []
								}], // 字体
								[{
									align: []
								}], // 居中
								["link", "image","video"],
								["clean"]
							],
							handlers: {
								image: function() {
									QuillWatch.emit(this.quill.id);
								},
								video: function(value) {
									// 上传视频
									if (value) {
										self.videoDialog.show = true;
										// document
										//   .querySelector(".avatar-uploader-video input")
										//   .click(); // 触发input框选择文件
									} else {
										this.quill.format("video", false);
									}
								},
							}
						}
					}
				},
				pickerOptions: {
					shortcuts: [{
						text: '今天',
						onClick(picker) {
							picker.$emit('pick', new Date());
						}
					}, {
						text: '昨天',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24);
							picker.$emit('pick', date);
						}
					}, {
						text: '一周前',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', date);
						}
					}]
				},
				templateUser_id: '',
			}
		},
		components: {
			quillEditor
		},
		computed: {
			role() {
				return this.name === 'admin' ? '超级管理员' : '普通用户';
			}
		},
		created() {
			// this.form.user_id=window.localStorage.getItem('user_id')
			// this.getUserList()
			this.getList()

		},
		// activated() {
		//     this.handleListener();
		// },
		// deactivated() {
		//     window.removeEventListener('resize', this.renderChart);
		//     bus.$off('collapse', this.handleBus);
		// },
		methods: {
            // 富文本视频上传前
            beforeUploadVideo(file) {
            	const fileSize = file.size / 1024 / 1024 < 500;
            	if (
            		[
            			"video/mp4",
            			"video/ogg",
            			"video/flv",
            			"video/avi",
            			"video/wmv",
            			"video/rmvb",
            			"video/mov",
            		].indexOf(file.type) == -1
            	) {
            		this.$message.error("请上传正确的视频格式");
            		return false;
            	}
            	if (!fileSize) {
            		this.$message.error("视频大小不能超过500MB");
            		return false;
            	}
            	// 富文本框视频上传限制最小宽高均为480px
            	this.isShowUploadVideo = false;
            	// const isVideo = file.type === "video/mp4";
            	// if (!isVideo) {
            	//   this.$message.error("上传视频只能是 mp4 格式!");
            	// } else {
            	//   // 显示loading动画
            	//   this.quillUpdate = true;
            	// }
            	// return isVideo;
            },
            
            addVideoLink(videoLink) {
            	if (!videoLink) return this.$message.error("请输入视频地址");
            	this.videoDialog.show = false;
            	const quill = this.$refs.myQuillEditor.quill;
            	const length = quill.getSelection(true).index;
            	quill.insertEmbed(length, "video", videoLink);
            	quill.setSelection(length + 1);
            },
            uploadVideoSuccess(res) {
            	console.log('上传返回的数据',res)
            	// res为图片服务器返回的数据
            	// 获取富文本组件实例
            	const quill = this.$refs.myTextEditor.quill;
            	// 如果上传成功
            	if (res.code == 0 && res.url != null) {
            		this.videoDialog.show = false;
            		// 获取光标所在位置
            		const length = quill.getSelection(true).index;
            		// 插入图片  res.info为服务器返回的图片地址
            		quill.insertEmbed(length, "video", res.url);
            		// 调整光标到最后
            
            		quill.setSelection(length + 1);
            	} else {
            		this.$message.error("视频插入失败");
            	}
            	// loading动画消失
            	this.quillUpdate = false;
            },
            uploadVideoError() {
            	// loading动画消失
            	this.quillUpdate = false;
            	this.$message.error("视频插入失败");
            },
            inputFun(e) {
            	this.$emit("inputFun", e);
            },
			uploadSectionFile(param) {
				var fileObj = param.file;
				// FormData 对象
				var form = new FormData();
				// 文件对象
				form.append("image", fileObj);
				uploadImg(form).then(res => {
					console.log("上传图片", res)
					this.addform.qr_code = res.url
					console.log(666, this.addform)
					this.$message({
						message: '上传成功！',
						type: 'success'
					});
				});
			},
			handleRemove(file, fileList) {
				this.addform.qr_code = "";
				this.fileList = [];
				this.fileList1 = [];
				this.hideUp = false;
			},

			uploadSectionFile1(param) {
				var fileObj = param.file;
				// FormData 对象
				var form = new FormData();
				// 文件对象
				form.append("image", fileObj);
				uploadImg(form).then(res => {
					console.log("上传图片", res)
					this.addform.img = res.url
					this.$message({
						message: '上传成功！',
						type: 'success'
					});
				});
			},
			handleRemove1(file, fileList) {
				this.addform.xuzhengzheng_img = "";
				this.fileList_1 = [];
				this.fileList_2 = [];
				this.hideUp = false;
			},
			uploadSectionFile2(param) {
				var fileObj = param.file;
				// FormData 对象
				var form = new FormData();
				// 文件对象
				form.append("image", fileObj);
				uploadImg(form).then(res => {
					console.log("上传图片", res)
					this.addform.shenfezhengzhemgmian_img = res.url
					this.$message({
						message: '上传成功！',
						type: 'success'
					});
				});
			},
			handleRemove2(file, fileList) {
				this.addform.shenfezhengzhemgmian_img = "";
				this.fileList_3 = [];
				this.fileList_4 = [];
				this.hideUp = false;
			},

			uploadSectionFile3(param) {
				var fileObj = param.file;
				// FormData 对象
				var form = new FormData();
				// 文件对象
				form.append("image", fileObj);
				uploadImg(form).then(res => {
					console.log("上传图片", res)
					this.addform.shenfenzhengfanmian_img = res.url
					this.$message({
						message: '上传成功！',
						type: 'success'
					});
				});
			},
			handleRemove3(file, fileList) {
				this.addform.shenfenzhengfanmian_img = "";
				this.fileList_5 = [];
				this.fileList_6 = [];
				this.hideUp = false;
			},
			getRowKeys(row) {
				return row.user_id
			},

			handleChange(selection) {
				console.log(selection)
				this.deleteList_data = selection
			},
			getroledropdown() {
				let that = this
				let query;
				query = this.form1
				console.log(query)
				roledropdown(query).then(res => {
					console.log("角色列表", res);
					that.roleOptions = res.results
				});
			},

			//重置
			restSearch() {
				this.form = {
					province: undefined,
					cirty: undefined
				}
				this.sheng = ''
				this.shi = ''
				this.getList()
			},

			//导出
			exportexelBtn() {
				let query = {}
				exportexel(query).then(res => {
					console.log("导出", res)
				});

			},

			dataSearch() {
				this.formatDate(that.value2)
			},
			//添加记录
			showLogdilog(row, type) {
				this.childtypeflag = type
				this.addLogVisible = true
				if (type == 2) {
					this.childrow = row
					this.addformchild = row
					this.uploadimgurl = row.img
				}

			},

			addLogcancel() {
				this.addLogVisible = false
			},


			handleSizeChange: function(size) {
				this.pagesize = size;
				console.log(this.pagesize) //每页下拉显示数据
			},
			handleCurrentChange: function(currentPage) {
				this.currentPage = currentPage;
				console.log(this.currentPage) //点击第几页
				this.page = currentPage
				this.getList()
			},
			handleSizeChange_1: function(size) {
				this.pagesize_1 = size;
				this.form1.size = size
				this.templateList(this.templateUser_id)
			},
			handleCurrentChange_1: function(currentPage) {
				this.currentPage_1 = currentPage;
				console.log(this.currentPage_1) //点击第几页
				this.page_1 = currentPage
				this.form1.page = currentPage
				this.templateList(this.templateUser_id)
			},

			handleSizeChange_2: function(size) {
				this.pagesize_2 = size;
				this.form2.size = size
				this.templateDetailClick()
			},
			handleCurrentChange_2: function(currentPage) {
				this.currentPage_2 = currentPage;
				console.log(this.currentPage_2) //点击第几页
				this.page_2 = currentPage
				this.form2.page = currentPage
				this.templateDetailClick()
			},
			showdialogVisible() {
				let that = this
				this.getCityData()
				this.Texttitle = '新增'
				that.province.splice(0, 0, {
					id: 100000,
					value: '全国'
				});
				that.province.splice(1, 1, {
					id: 100001,
					value: '员工'
				});
				this.addform = {
					yingyezhizhao_img: '',
					xuzhengzheng_img: '',
					shenfezhengzhemgmian_img: '',
					shenfenzhengfanmian_img: '',
				}
				this.readOnly = false
				this.user_id = ''
				this.dialogVisible = true
				this.flagtype = 1
			},


			//s删除
			deleteThis(row) {
				let that = this
				that.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let query = {
						"banner_id": row.banner_id,
					}
					bannerDelete(row.banner_id, query).then(res => {
						that.dialogVisible = false
						if (res.code == 0) {
							that.$message({
								message: '删除成功！',
								type: 'success'
							});
							that.getList()
						}

						// this.tableData = res.list;
						// this.pageTotal = res.pageTotal || 50;
					});
				}).catch(() => {
					that.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//编辑
			handleClick(row, readOnly) {
				let that = this
				console.log("编辑", row)
				this.Texttitle = '编辑'
				this.flagtype = 2
				this.dialogVisible = true
				this.addform = row
				this.user_id = row.banner_id
				// this.secondviewsetclik()
				// this.thirdviewsetclik()
			},


			//关闭新增弹窗
			logCancel_1() {
				this.dialogVisible = false
			},
			logCancel_2() {
				this.templateVisible_add = false
			},
			logCancel_3() {
				this.templateVisibledetail_add_1 = false
			},
			isMobile(value) {
				return /^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(value);
				return /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i
					.test(value);
			},
			//新增出入账
			submitForm_add() {

				let parms = this.addform
				shuomingEdict(this.addform.shuoming_id, parms).then(res => {
					console.log("修改", res)
					this.dialogVisible = false
					if (res.code == 0) {
						this.$message({
							message: '修改成功！',
							type: 'success'
						});
						this.getList()
					}

					// this.tableData = res.list;
					// this.pageTotal = res.pageTotal || 50;
				});



			},
			getList() {
				let that = this
				let query;
				query = that.form
				console.log(query)

				shuomingList(query).then(res => {
					that.addform = res.results[0];

				});
			},
			formatTen(num) {
				return num > 9 ? (num + "") : ("0" + num);
			},
			formatDate1(date) {
				console.log("时间", date)
				var date = new Date(date)
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDate();
				var hour = date.getHours();
				var minute = date.getMinutes();
				var second = date.getSeconds();

				return year + "-" + this.formatTen(month) + "-" + this.formatTen(
					day) // + " " + this.formatTen(hour) + ":" + this.formatTen(minute) //+ ":" + this.formatTen(sec
			},
			formatDate(date) {
				console.log("时间", date)
				var date = new Date(date)
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDate();
				var hour = date.getHours();
				var minute = date.getMinutes();
				var second = date.getSeconds();

				return year + "-" + this.formatTen(month) + "-" + this.formatTen(
					day) //+ " " + this.formatTen(hour) + ":" +
				console.log(333, year + "-" + this.formatTen(month) + "-" + this.formatTen(day))
				// this.formatTen(
				// 	minute) + ":" + this.formatTen(second);
			},
			changeDate() {
				const now = new Date().getTime();
				this.data.forEach((item, index) => {
					const date = new Date(now - (6 - index) * 86400000);
					item.name = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
				});
			}

		}
	};
</script>


<style scoped>
	/deep/ .el-upload-list {
		display: none;
	}

	/deep/ .el-pagination__sizes {
		display: none !important;
	}

	/deep/ .el-upload--text {
		width: inherit !important;
		height: inherit !important;
	}

	.edict_row_title {
		width: 100%;
		height: 80px;
		line-height: 100px;
		margin: auto;
		font-weight: bold;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409eff;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}

	.headercon {
		width: 80%;
		margin: auto;
		height: 220px;
		margin-top: 20px;
		margin-bottom: 40px;
		/* border-bottom: 1px solid #006FBC; */
	}

	/deep/ .el-checkbox__label {
		font-size: 16px;
	}

	/deep/ .el-checkbox {
		margin-top: 10px;
	}

	.el-upload {
		width: 100px;
	}

	.el-row {
		margin-bottom: 20px;
	}

	.grid-content {
		display: flex;
		align-items: center;
		height: 40px;
	}

	.grid-cont-right {
		flex: 1;
		text-align: center;
		font-size: 14px;
		color: #999;
	}

	.grid-num {
		font-size: 30px;
		font-weight: bold;
	}

	.grid-con-icon {
		font-size: 50px;
		width: 100px;
		height: 100px;
		text-align: center;
		line-height: 100px;
		color: #fff;
	}

	.grid-con-1 .grid-con-icon {
		background: rgb(45, 140, 240);
	}

	.grid-con-1 .grid-num {
		color: rgb(45, 140, 240);
	}

	.grid-con-2 .grid-con-icon {
		background: rgb(100, 213, 114);
	}

	.grid-con-2 .grid-num {
		color: rgb(45, 140, 240);
	}

	.grid-con-3 .grid-con-icon {
		background: rgb(242, 94, 67);
	}

	.grid-con-3 .grid-num {
		color: rgb(242, 94, 67);
	}

	.user-info {
		display: flex;
		align-items: center;
		padding-bottom: 20px;
		border-bottom: 2px solid #ccc;
		margin-bottom: 20px;
	}

	.user-avator {
		width: 120px;
		height: 120px;
		border-radius: 50%;
	}

	. user-info-cont {
		padding-left: 50px;
		flex: 1;
		font-size: 14px;
		color: #999;
	}

	.user-info-cont div:first-child {
		font-size: 30px;
		color: #222;
	}

	.user-info-list {
		font-size: 14px;
		color: #999;
		line-height: 25px;
	}

	.user-info-list span {
		margin-left: 70px;
	}

	.mgb20 {
		margin-bottom: 20px;
	}

	.todo-item {
		font-size: 14px;
	}

	.todo-item-del {
		text-decoration: line-through;
		color: #999;
	}

	.schart {
		width: 100%;
		height: 300px;
	}

	.delete {
		color: red;
	}

	.dialog-footer {
		text-align: right;
	}

	.box {
		width: 97%;
		border: 1px solid #999;
		position: relative;
		padding: 30px;
		margin-top: 40px;
	}

	.box .title {
		width: 100px;
		height: 30px;
		position: absolute;
		top: -13px;
		z-index: 10;
		background-color: #F4F8FF;
		text-align: center;
		font-weight: bold;

	}
	.ql-editor{
		margin-top: 10px;
		float: left;
		margin-left: -130px;
	}
</style>